<template>
  <div>
    <el-drawer
      title="立减设置"
      :before-close="handleClose"
      :visible.sync="reductionConfigDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="40%"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="form"
          label-position="top"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item
            label="是否开启每升立减活动信息展示"
            label-width="80px"
            prop="isShow"
          >
            <el-radio v-model="form.isShow" label="1">开启</el-radio>
            <el-radio v-model="form.isShow" label="0">关闭</el-radio>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">{{
            loading ? "提交中 ..." : "确 定"
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getReductionShowInfoApi,
  updateReductionShowInfoApi,
} from "@/api/market/reductionActivity";
export default {
  name: "ReductionConfig",
  props: {
    reductionConfigDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        isShow: null, // 0不启用  1启用
      },
      rules: {
        isShow: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },
  watch: {
    reductionConfigDialog(val) {
      if (val) {
        this.getReductionShowInfo();
      }
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:reductionConfigDialog", false);
    },
    async getReductionShowInfo() {
      const res = await getReductionShowInfoApi();
      this.form.isShow = res.data.isShow + "";
    },
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let isShow = this.form.isShow;
          await updateReductionShowInfoApi(isShow);
          this.msgSuccess("设置成功");
          this.handleClose();
        } else {
          console.log("error");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .demo-drawer {
  .el-drawer__header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
  }
  .el-drawer__body {
    padding: 15px;
    overflow-x: hidden;
    .demo-drawer__footer {
      text-align: right;
    }
  }
}
</style>
